<template>
  <view class="content">
   <cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">我的</block>
   </cu-custom>
   
   <view class="user-container">
     <!-- 用户信息 -->
     <view class="userinfo">
       <view class="info">
         <view class="nickname">昵称</view>
         <view>完善信息即可领取现金奖励</view>
       </view>
       <view class="avatar">
         <image src="../../static/logo.png" mode="aspectFit"></image>
       </view>
     </view>
     
     <!-- 用户获取的收入 -->
     <view class="money">
       <view>
         <view>0￥</view>
         <view>111</view>
       </view>
       <view>
         <view>5￥</view>
         <view>222</view>
       </view>
     </view>
     
     <!-- 快速导航 -->
     <view class="user-nav">
       <view>已报名</view>
       <view>待面试</view>
       <view>待评价</view>
       <view>已完成</view>
     </view>
     
     <view class="fun-list">
       <view class="fun-list-item">
         <view>图片</view>
         <view>消息提醒</view>
         <view>箭头</view>
       </view>
       <view class="fun-list-item">
         <view>图片</view>
         <view>推荐有奖</view>
         <view>箭头</view>
       </view>
       <view class="fun-list-item">
         <view>图片</view>
         <view>我的收益</view>
         <view>箭头</view>
       </view>
       <view class="fun-list-item">
         <view>图片</view>
         <view>联系我们</view>
         <view class="arrow">
           <text>这是其他的描述文字</text>
           <text>箭头</text>
         </view>
       </view>
     </view>
      
   </view>
   
   
  </view>
</template>

<script>
</script>

<style lang="scss">
  .user-container {
    padding: 0 30upx;
    .userinfo {
      margin-top: 60upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .nickname {
        font-size: 45upx;
        margin-bottom: 20upx;
      }
      .avatar image {
        width: 100upx;
        height: 100upx;
      }
    }
    .money {
      display: flex;
      height: 100upx;
      margin-top: 60upx;
      box-shadow: 0 0 20px -10px #000;
      align-items: center;
      view:first-child, view:nth-child(2) {
        width: 100%;
        text-align: center;
      }
    }
    .user-nav {
      display: flex;
      justify-content: space-between;
      padding: 40upx 0;
    }
    .fun-list {
      .fun-list-item {
        border-bottom: 1px solid #ddd;
        height: 80upx;
        line-height: 80upx;
        view {
          float: left;
          &:first-child {
            margin-right: 20upx;
          }
          &:last-child {
            float: right;
          }
        }
      }
    }
  }
</style>
